<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>场景地图</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/map.css" />
  </head>
  <body>
    <!-- 轮播图 -->
    <div class="banner">
      <ul class="item">
        <li style="opacity: 1"><img src="../img/banner1.jpg" alt="" /></li>
        <li><img src="../img/banner2.jpg" alt="" /></li>
        <li><img src="../img/banner3.jpg" alt="" /></li>
      </ul>
      <span class="lef"><</span>
      <span class="rig">></span>
      <ul class="page">
        <li style="background: white"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <img src="../img/logo.png" alt="" class="logo" />
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/role">角色设定</a></li>
        <li class="now"><a href="/map">场景地图</a></li>
        <li><a href="/prototype">场景原型</a></li>
        <li><a href="/evaluation">作品评价</a></li>
        <li><a href="/research">问卷调查</a></li>
      </ul>
    </div>
    <!-- 主要内容 -->
    <div class="main">
      <!-- 场景地图 -->
      <div class="map">
        <h2>场景地图</h2>
        <div class="box">
          <img src="../img/map1.webp" alt="" />
          <div class="text">
            <p class="p1">第一回·黑风山</p>
            <p class="p2">
              黑风山是游戏第一回的地图，其主要有苍狼林、翠竹林、黑风洞三个部分。
            </p>
          </div>
        </div>
        <div class="box">
          <div class="text">
            <p class="p1">第二回·黄风岭</p>
            <p class="p2">
              黄风岭是游戏第二回的地图，该地图包含沙门村、挟魂崖、卧虎寺、黄风阵，以及隐藏地图“隐·斯哈里国”。
            </p>
          </div>
          <img src="../img/map2.webp" alt="" />
        </div>
        <div class="box">
          <img src="../img/map3.webp" alt="" />
          <div class="text">
            <p class="p1">第三回·小西天</p>
            <p class="p2">
              小西天是游戏第三回的地图，该地图包含雪山径、浮屠界、苦海、极乐谷、小雷音寺。
            </p>
          </div>
        </div>
        <div class="box">
          <div class="text">
            <p class="p1">第四回·盘丝岭</p>
            <p class="p2">
              盘丝岭是游戏第四回的地图，该地图包含盘丝洞、黄花观。
            </p>
          </div>
          <img src="../img/map4.webp" alt="" />
        </div>
        <div class="box">
          <img src="../img/map5.webp" alt="" />
          <div class="text">
            <p class="p1">第五回·火焰山</p>
            <p class="p2">
              火焰山是游戏第五回的地图，该地图包含灰烬林、丹灶谷、火光地、璧水洞。
            </p>
          </div>
        </div>
        <div class="box">
          <div class="text">
            <p class="p1">第六回·花果山</p>
            <p class="p2">花果山是游戏第六回的地图，该地图包含山脚、水帘洞。</p>
          </div>
          <img src="../img/map6.webp" alt="" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footer>
      <p>直面天命 为战而生</p>
    </footer>
    <!-- 引入轮播图js -->
    <script src="../js/banner.js"></script>
  </body>
</html>
